import { FC, useState } from "react"
import { Timeline } from "antd"
import { ClockCircleOutlined } from "@ant-design/icons"
import styles from "./index.less"
import TimeAxis from "./components/TimeAxis"
import ReportView from "./components/ReportView"
import ChartView from "./components/ChartView"
const adviceCloseLoop: FC = () => {

  const [flowState, setFlowState] = useState<number>(0)

  const typeObjectList = [
    {
      type: "1",
      colorMap: "#5292DE",
      colorMapA: "#1869CA",
      iconMap: require("@/asstes/hospitalizedInfo/type-1-s-@3x.png"),
      iconMapA: require("@/asstes/hospitalizedInfo/type-1-a.png"),
      sIconMap: require("@/asstes/hospitalizedInfo/type-4-s.png"),
    },
    {
      type: "2",
      colorMap: "#2AC592",
      colorMapA: "#0AB17A",
      iconMap: require("@/asstes/hospitalizedInfo/type-2-s-@3x.png"),
      iconMapA: require("@/asstes/hospitalizedInfo/type-2-a.png"),
      sIconMap: require("@/asstes/hospitalizedInfo/type-2-s.png"),
    },
    {
      type: "3",
      colorMap: "#B62A2A",
      colorMapA: "#B62A2A",
      iconMap: require("@/asstes/hospitalizedInfo/type-3-s-@3x.png"),
      iconMapA: require("@/asstes/hospitalizedInfo/type-3-a.png"),
      sIconMap: require("@/asstes/hospitalizedInfo/type-3-s.png"),
    },
    {
      type: "4",
      colorMap: "#D7A700",
      colorMapA: "#D7A700",
      iconMap: require("@/asstes/hospitalizedInfo/type-4-s-@3x.png"),
      iconMapA: require("@/asstes/hospitalizedInfo/type-4-a.png"),
      sIconMap: require("@/asstes/hospitalizedInfo/type-4-s.png"),
    },
    {
      type: "5",
      colorMap: "#D7A700",
      colorMapA: "#D7A700",
      iconMap: require("@/asstes/hospitalizedInfo/type-4-s-@3x.png"),
      iconMapA: require("@/asstes/hospitalizedInfo/type-4-a.png"),
      sIconMap: require("@/asstes/hospitalizedInfo/type-4-s.png"),
    }
  ]

  const renderTimelineImg = (item: any) => {
    return (
      <div className={styles.timelineItemImgBox} style={{ backgroundColor: item.colorMapA }}  >
        <img src={item.iconMap} className={styles.timelineItemImg} />
      </div>
    )
  }

  /**
   * 时间轴
   * 
   */

  const timelineList = () => {
    return (
      <div className={styles.timelineList}>
        <Timeline className={styles.timelineList} mode="alternate">
          {
            typeObjectList.map((item, index) => {
              return (
                <Timeline.Item key={index} className={styles.timelineItem} dot={renderTimelineImg(item)} label="2015-09-01">
                  <div className={`${index % 2 == 0 ? styles.timeAxisBox : styles.timeAxisBoxConverse}`}>
                    <TimeAxis item={item} />
                  </div>
                </Timeline.Item>
              )
            })
          }
        </Timeline>
      </div>
    )
  }

  // ReportView
  return (
    <div className={styles.adviceCloseLoop}>
      {
        flowState === 0 ? timelineList() : flowState === 1 ? <ReportView /> : <ChartView />
      }
    </div>
  )
}

export default adviceCloseLoop